<template>
  <div id="app">
<!--    <h1><a href="">欢迎来到喜马拉雅FM！</a></h1>-->
    <router-view></router-view>
    <footer>
      <span></span>
      <a href="">
            <span>
              打开APP，听更多声音
              <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
              </svg>
            </span>
      </a>
      <p>Copyright © 2014-2020 www.ximalaya.com</p>
      <p>lnc.ALL Rights Reserved</p>
      <div>
        <a href="">全部分类</a>
        |
        <a href="">海外版</a>
        |
        <a href="">联系我们</a>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  // name: 'app',
  data () {
    return {
      msg: 'Welcome to FM',
    }
  },
  methods:{
    change(a){
      this.msg=a;
    }
  }
}
</script>

<!--
{{item.comment}}

-->
<!--
{{item.listen}}
-->

<style>
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  a{
    text-decoration: none;
  }
  /*<!--  头部header-->*/
  .nav{
    display: flex;
    align-items: center;
    /*background-color: purple;*/
    padding: 10px 20px 0;
  }
  .nav is_fixed{
    position: fixed;
    width: 90%;
    background-color: #FFFFFF;
  }
  .nav li{
    /*width: 30%;*/
    /*border:1px solid red;*/
    justify-content: space-between;
  }
  .nav li:nth-of-type(1) a{
    font-size: 18px;
    color:#FA2800;
    font-weight: 700;
    letter-spacing: .05em;
  }
  .nav li:nth-of-type(2){
    flex-grow: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin: 0 5px;
  }
  .nav li:nth-of-type(2) svg{
    position: absolute;
    top: 25%;
    left: 5%;
  }
  .nav li:nth-of-type(2) .search{
    position: relative;
    border-radius: 30px;
    background-color: #eff1f4;
    border:1px solid #eff1f4;
    height: 30px;
    outline: none;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
  }
  .nav li:nth-of-type(2)>a{
    color: #7e8c8d;
    display: block;
    width: 100%;
  }
  .nav li:nth-of-type(3)>button{
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    /*margin-left: 10px;*/
    margin: 5px 0;
    background-color: #FFFFFF;
    padding: 8px 10px;
    border:1px solid #f66847;
    border-radius: 15px;
    font-size: 12px;
    color: #f86442;
    text-align: center;
  }
  /*导航栏*/
  .navtab{
    display: flex;
    overflow: auto;
  }
  .navtab::-webkit-scrollbar{
    display: none;
  }
  .nav_tab{
    display: flex;
    flex-shrink: 0;
    /*background-color: #f66847;*/
    border-bottom: .5px solid #e8e8e8;
  }
  .nav_tab li{
    margin-right: 5px;
    /*border: 1px solid black;*/
    padding: 7px 12.5px;
    font-size: 14px;
    line-height: 26.5px;
    color: #72727b;
  }
  .navtab .nav_tab li a{
    color: #72727b;
  }
  .navtab .nav_tab .current{
    font-size: 18px;
    color: #40404c;
    position: relative;
  }
  .navtab .nav_tab .current::before{
    content: '';
    width: 18px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #f06742;
  }

  /*.navtab .nav_tab .current::before{*/
  /*  border-radius: 100px;*/
  /*  content: '';*/
  /*  position: absolute;*/
  /*  left: 50%;*/
  /*  transform: translateX(-50%);*/
  /*  bottom: 0;*/
  /*  width: 18px;*/
  /*  height: 3px;*/
  /*  border: #f06742;*/
  /*}*/
  /*底部footer*/
  footer{
    border-top: .5px solid #eee;
    padding-bottom: 80px;
    background: url("./assets/images/footer_bg_2b1fa03.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  footer>span{
    display: block;
    width: 100%;
    height: 40px;
    background: url("./assets/images/footer_logo_f90f028.png") no-repeat center;
    background-size: 160px 40px;
    margin: 34px auto 18px;
  }
  footer>a{
    width: 292px;
    height: 49px;
    border-radius: 25px;
    color: #fa2800;
    padding: 15px 55px;
    border: 1px solid #fa2800;
  }
  footer>a>span{
    font-size: 18px;
    font-family: PingFangHK-Regular,PingFangHK;
    font-weight: 400;
    color: #fa2800;
    display: inline-block;
    line-height: 50px;
    margin-right: 8px;
  }
  footer>p{
    font-size: 12px;
    color: gray;
  }
  footer>p:nth-of-type(1){
    margin-top: 15px;
  }
  footer>p:nth-of-type(2){
    margin-bottom: 10px;
  }
  footer>div>a{
    color: #40404c;
    text-decoration: none;
    /*background-color: palevioletred;*/
    margin: 0 15px;
    font-size: 13px;
  }

h1, h2 {
  font-weight: normal;
}

</style>
